<%-- 
    Document   : register
    Created on : Nov 11, 2013, 7:41:42 PM
    Author     : BAOLA
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="/struts-tags" prefix="s" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="header.jsp"/>
<script type="text/javascript">

    var regUsername = /^[A-Za-z\d]{4,50}$/;
    var regPassword = /^[A-Za-z\d]{4,50}$/;
    var regEmail = /^(\w+[\-\.])*\w+@(\w+\.)+[A-Za-z]+$/;
    function validateForm(form) {
        var username = form.username.value;
        var password = form.password.value;
        var confirm_password = form.confirm_password.value;
        var email = form.email.value;
        var error = [];
        if (!regUsername.test(username)) {
            error[error.length] = "Please enter a valid username (Word and number only at least 4 characters)";
        }
        if (!regPassword.test(password)) {
            error[error.length] = "Please enter a valid password (Word and number only at least 4 characters)";
        }
        if (password != confirm_password) {
            error[error.length] = "Confirm password does not match. Please check again";
        }
        if (!regEmail.test(email)) {
            error[error.length] = "You must enter a valid email";
        }
        if (error.length >0) {
            reportError(error);
            return false;
        }
        return true;
    }

    function reportError(error) {
        var error_container = document.getElementById("error-container");
        var error_ol = document.getElementById("error-ol");
        error_ol.innerHTML = "";
        for (i = 0; i < error.length; i++) {
            error_ol.innerHTML += '<li><label for="name" class="error">' +error[i]+ '</label></li>';
        }
        error_container.style.display = 'block';
        error_ol.style.display = 'block';
    }
</script>
<div class="mid-wrapper">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="span12">
                <div class="widget-head blue">
                    <h3>Create your account</h3>
                </div>
                <div class="widget-container">
                    <form class="form-horizontal" action="register.action" method="post" onsubmit="return validateForm(this);">
                        <div id="error-container" class="error-container" style="display: none;">
                            <h4>Errors occur, please see below for detail</h4>
                            <ol id="error-ol" style="display: none;"></ol>
                        </div>

                        <c:if test="${not empty param.error}">
                            <div class="control-group">
                                <font color="red">
                                    <c:out value="${param.error}"/>
                                </font>
                            </div>
                        </c:if>
                        <div class="control-group">
                            <label class="control-label">User Name</label>
                            <div class="controls">
                                <input id="username" name="username" type="text" class="span3"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Password</label>
                            <div class="controls">
                                <input id="password" name="password" type="password" class="span3"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Confirm password</label>
                            <div class="controls">
                                <input id="confirm_password" name="confirm_password" type="password" class="span3"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Email</label>
                            <div class="controls">
                                <input id="email" name="email" type="text" class="span3"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">First Name</label>
                            <div class="controls">
                                <input id="firstname" name="firstname" class="span3" type="text"/>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label">Last Name</label>
                            <div class="controls">
                                <input id="lastname" name="lastname" type="text" class="span3"/>
                            </div>
                        </div>
                        <button type="submit" class="btn btn-primary">Sign Up</button>
                        <button type="button" class="btn">Cancel</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<jsp:include page="footer.jsp"/>

